<template>
	<view>
		<!-- <page-head ref="pageHead" :title="'森歌微商城-佣金提现'" :headtype="2"></page-head> -->
		<view class="mybg">
			<image class="bgimg" :src="appConfig.center_setting.top_bg_image" mode=""></image>
			<view class="userinfo flex-center "> 
				<image class="head" src="https://fx.senge.com/uploads/images/20230407150436bb4555010.png" mode=""></image>
				<view class="user flex">
					<view class="">
						<view class="nametop flex">
							<view class="name">账号余额</view>
						</view>
						<view class="vip">3000.00 <text>元</text></view>
					</view>
					<view class="draw">立即提现</view>
				</view>
			</view>
			<view class="gradebox flex margin30" style="margin-bottom: 50rpx;">
				<view class="graderow">
					<view class="gradenum">0</view>
					<view class="gradetext">可提现金额</view>
				</view>
				<view class="graderow">
					<view class="gradenum">0</view>
					<view class="gradetext">已提现金额</view>
				</view>
			</view>
		</view>
		<view class="content margin30">
			<view class="flex">
				<view class="ordernavmain">
					<view class="ordereach" :class="activenav == 0 ? 'activenav':''" @click="navclick(0)">全部</view>
					<view class="ordereach" :class="activenav == 2 ? 'activenav':''" @click="navclick(2)">提现记录</view>
					<view class="ordereach" :class="activenav == 3 ? 'activenav':''" @click="navclick(3)">收益记录</view>
				</view>
			</view>
			<view class="contentbox">
				<view class="row flex" v-for="(item,index) in draw">
					<view class="row_le">
						<view class="rowtop flex-start">
							<view class="iconfont arrows">&#xe61c;</view>
							<view class="rowtitle">{{item.title}}</view>
						</view>
						<view class="time">{{item.time}}</view>
					</view>
					<view class="row_ri">+{{item.num}}</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import { mapMutations, mapActions, mapGetters } from "vuex";
	export default {
		data() {
			return {
				activenav: 0,
				draw: [
					{title: "一级经销商销售集成灶1台",time: "2023-04-06 16:50:40",num:"400.28"},
					{title: "二级销售团购10台",time: "2023-04-06 16:50:40",num:"800.00"},
				],
			}
		},
		computed: {
		    ...mapGetters(["appConfig"]),
		},
		onLoad() {
			this.$refs.pageHead.getTopHeight()
		},
		methods: {
			navclick(type) { //切换状态
				let that = this;
				that.activenav = type;
				// that.initData();
			},
		}
	}
</script>

<style>
	page{
		background-color: #efefef;
		padding-bottom: 30rpx;
	}
	.mybg{
		position: relative;
	}
	.bgimg{
		width: 100%;
		height: 300rpx;
	}
	.head{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		margin-right: 20rpx;
	}
	.userinfo{
		width: 100%;
		position: absolute;
		top: 36rpx;
	}
	.nametop{
		width: 370rpx;
	}
	.name{
		font-size: 28rpx;
		color: #fff;
		margin-bottom: 2rpx;
	}
	.vip{
		border-radius: 50rpx;
		padding: 0 4rpx;
		font-size: 42rpx;
		color: #fff;
	}
	.vip text{
		font-size: 26rpx;
		color: #f5f7fb;
		font-weight: 300;
		margin-left: 10rpx;
	}
	.gradebox{
		width: 692rpx;
		box-sizing: border-box;
		background-color: #fff;
		position: absolute;
		top: 180rpx;
		padding: 32rpx;
		border-radius: 20rpx;
	}
	.graderow{
		text-align: center;
		width: 50%;
		
	}
	.graderow:nth-of-type(1){
		border-right: #eaeaea 1rpx solid;
	}
	.gradenum{
		font-weight: 900;
		font-size: 40rpx;
		color: #006dc6;
	}
	.gradetext{
		font-size: 26rpx;
		color: #707070;
	}
	.numgrades{
		font-size: 38rpx;
	}
	.content{
		background-color: #fff;
		border-radius: 12rpx;
		margin-top: 50rpx;
		padding-bottom: 700rpx;
	}
	.ordernavmain {
		width: 70%;
		display: flex;
		justify-content: space-between;
		padding: 26rpx 26rpx 36rpx 26rpx;
	}
	
	.ordereach {
		position: relative;
		color: #0A0A0A;
		font-size: 28rpx;
		width: 150rpx;
		padding: 4rpx 0;
		text-align: center;
		border-radius: 40rpx;
	}
	.activenav {
		color: #fff;
		background-color: #006dc6;
	}
	.draw{
		background-color: #eaf1f9;
		color: #006dc6;
		padding: 14rpx 40rpx;
		font-size: 30rpx;
		border-radius: 40rpx;
	}
	.row{
		padding: 26rpx 34rpx;
		background-color: #f9f9f9;
	}
	.row:nth-of-type(2n){
		background-color: #ffffff;
	}
	.arrows{
		margin-right: 20rpx;
		font-size: 22rpx;
		font-weight: 900;
		color: #0b73c8;
	}
	.rowtitle{
		font-size: 28rpx;
		color: #606060;
	}
	.time{
		font-size: 24rpx;
		color: #606060;
		margin-top: 10rpx;
		margin-left: 44rpx;
	}
	.row_ri{
		font-size: 36rpx;
		color: #fe9f1f;
	}
</style>
